<template>
	<view class="app-classify-goods-list-one">
		<view class="app-classify-goods-list-one__skeleton" v-if="hasLoading">
			<e-skeleton :show="true" :fixed="false">
				<view class="e-flex e-flex-items-start e-m-b-20" v-for="item in 8">
					<e-skeleton-item variant="block">
						<view class="app-classify-goods-list-one__skeleton-img"></view>
					</e-skeleton-item>
					<view class="e-flex-1 e-m-l-30">
						<e-skeleton-item variant="block">
							<view class="app-classify-goods-list-one__skeleton-box1"></view>
						</e-skeleton-item>
						<view class="e-p-t-20 e-flex">
							<e-skeleton-item variant="block">
								<view class="app-classify-goods-list-one__skeleton-box2"></view>
							</e-skeleton-item>
						</view>
						<view class="e-p-t-20 e-flex">
							<e-skeleton-item variant="block">
								<view class="app-classify-goods-list-one__skeleton-box3"></view>
							</e-skeleton-item>
						</view>
					</view>
				</view>
			</e-skeleton>
		</view>

		<e-scroll-view
			ref="scrollViewRef"
			height="100%"
			width="100%"
			lower-threshold="400"
			refresherRefreshingImg=" "
			refresherRefreshingText=" "
			:refresherDefaultText="$t('tabbar.classifyRefresherTxt1')"
			:refresherPullingText="$t('tabbar.classifyRefresherTxt2')"
			refresherTitleStyle="font-size:24rpx"
			:refresherDefaultImg="$staticPath('arrow-up-double.png')"
			:watchTouchmove="watchTouchmove"
			:refresher-enabled="refresherEnabled"
			unit="rpx"
			@refresh="handlePullDownRefresh"
			@scrolltolower="handleQueryPage()"
			@scroll="handleScroll"
			@touchstart="handleTouchstart"
			@touchmove="handleTouchmove"
			@touchend="handleTouchend"
			v-else
		>
			<view class="app-classify-goods-list-one__list">
				<view v-for="(item, index) in goodsList"
					:key="item.id">
					<e-line v-if="index !== 0"></e-line>
					<ClassifyGoodsItem :info="item" />
				</view>
			</view>
			<load-more v-if="!isEmpty" :showLoad="showLoad">
				<view class="e-flex-xy-center" v-if="nextText">
					<view class="app-classify-goods-list-one__icon" :class="[hasNext && 'is-active']">
						<app-image src="arrow-up-double.png" size="34rpx"></app-image>
					</view>
					<text class="e-font-24 c-secondary e-p-l-20">{{ $t(nextText) }}</text>
				</view>
			</load-more>
		</e-scroll-view>
	</view>
</template>

<script setup lang="ts">
import { watch, computed, nextTick,onMounted } from 'vue';
import { getGoodsList } from '@/common/request/api';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { useScrollView } from '../../hooks/useScrollView';
import { getRect } from '@/common/utils';
import ClassifyGoodsItem from '../../goods-item.vue'

const props = defineProps({
	params: Object,
	refresherEnabled: Boolean
});
const emit = defineEmits(['prev', 'next']);

const ctx = useCurrentInstance();

const requestParams = computed(() => props.params);

const {
	showLoad,
	isGet,
	isEmpty,
	list: goodsList,
	handleQueryPage,
	handleRefresh
} = useQueryPage({
	api: getGoodsList,
	option: {
		params: requestParams
	}
});

const { scrollViewRef, handlePullDownRefresh, watchTouchmove, hasNext, hasFullPage, nextText, scrollHeight,handleScroll, handleTouchstart, handleTouchmove, handleTouchend, hasLoading } =
	useScrollView(isGet, () => {
		emit('prev')
	},
	() => {
		emit('next')
	});

watch(requestParams, () => {
	watchTouchmove.value = false;
	hasLoading.value = true;
	hasFullPage.value = true;
	goodsList.splice(0, goodsList.length);
	handleRefresh().finally(() => {
		hasLoading.value = false;
		nextTick(async () => {
			if (!isGet.value) {
				if(!scrollHeight.value){
					const boxSize = await getRect(ctx, '.app-classify-goods-list-one')
					scrollHeight.value = boxSize.height!
				}
				getRect(ctx, '.app-classify-goods-list-one__list').then((size) => {
					if (size.height! < scrollHeight.value) {
						hasFullPage.value = false;
					}
				});
			}
		});
	});
});

onMounted(() => {
	getRect(ctx, '.app-classify-goods-list-one').then((size) => {
		scrollHeight.value = size.height!
	});
})
</script>

<style lang="scss" scoped>
@include appBem_b(classify-goods-list-one) {
	height: 100%;
	padding: 16rpx;
	@include appBem_e(skeleton) {
		height: 100%;
		overflow: hidden;
		&-img {
			width: 168rpx;
			height: 168rpx;
		}
		&-box1 {
			height: 30rpx;
		}
		&-box2 {
			width: 300rpx;
			height: 30rpx;
		}
		&-box3 {
			width: 180rpx;
			height: 30rpx;
		}
	}
	@include appBem_e(scribing) {
		text-decoration: line-through;
	}
	@include appBem_e(icon) {
		transition-duration: 0.2s;
		transition-property: transform;
		transform: rotate(0deg);
		@include appWhen(active) {
			transform: rotate(180deg);
		}
	}
}
</style>
